<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}

        .demo1{position:absolute;left:0;right:0;top:0;bottom:0;width:1000px;height:100px;background:#ccc;margin: auto;border: 1px solid #000;overflow: hidden;}
        ul{overflow: hidden;margin-right:-20px; }
        li{float:left;width:330px;margin-right:10px;height:100px;background-color:#f00;}

        .demo2{width:600px;height:300px;margin:0 auto;border:1px solid #000000;/*overflow: hidden;*/}
        .demo2 .item1{margin:5%;background:#d58512;}
    </style>
</head>
<body>
<div class="demo1">
    <ul>
        <li>内容一</li>
        <li>内容二</li>
        <li>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</li>
    </ul>
</div>

<div class="demo2">
    <div class="item1">123</div>
</div>
</body>
</html>